<template>
  <view class="vin-search-component">
    <uni-section type="line">
    	<uni-search-bar @confirm="search" v-model="searchValue" @blur="blur" 
      @focus="focus" @input="input"
    		@cancel="cancel" @clear="clear" cancelButton="none" 
        placeholder="请输入17位VIN码">
        
        <template v-slot:searchIcon>
        		<uni-icons  color="#3d5690" size="20" type="scan" @click="uploadImage"/>
        </template>
        
        <template v-slot:clearIcon>
        		<uni-icons  color="#3d5690" size="18" type="closeempty" />
        </template>
          
    	</uni-search-bar>
      <button class="vin-search-button" @click="vinSearch">查询</button>
    </uni-section>
  </view>
</template>

<script>
  export default {
    options: {
    	styleIsolation: 'shared', // 解除样式隔离
    },
    data(){
      return {
        searchValue:'',
      }
    },
    methods:{
      search(){},
      blur(){},
      focus(){},
      input(){},
      clear(){},
      uploadImage(){
        let _this = this
        uni.chooseImage({
        	count: 6, //默认9
        	sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        	sourceType: ['album'], //从相册选择
        	success: function (res) {
        		console.log(JSON.stringify(res.tempFilePaths));
        	}
        });
      },
      vinSearch(){
        let value = this.searchValue.trim()
        if(value == ''){
          this.$modal.alert("请输入vin码")
          return 
        }
        let reg = /\w/
        if(!reg.test(value)){
          this.$modal.alert("vin码格式错误")
          return 
        }
        this.searchValue = ''
        this.$tab.navigateTo(`/pages/eCatalog/index?vinCode=${value}&from=2`)
      }
    },
  }
</script>

<style>
  @import url('../../static/style/vin/vin-search.css');
</style>